<template>
	<view class="pt40 plr30">
		<view class="h60 pl10">故障设备</view>
		<view class="mb50 flex_a h100 plr30 bf border-r1 shadow">
			<view class="flex1"><input type="text" v-model="dataForm.deviceNo" placeholder-class="c9"
					placeholder="请扫描或输入设备编号" /></view>
			<view class="w80 h80 p20" @click="scanCode">
				<image src="/static/ic_sm1_2x.png" mode="widthFix" style="width: 40upx;height: 40upx;"></image>
			</view>
		</view>
		<view class="h60 pl10">上传照片（最多3张）</view>
		<view class="mb50 ptb30 bsb bf border-r1 shadow" style="min-height: 300upx;">
			<robby-image-upload v-model="pics" :serverUrl="imgUploadUrl" fileKeyName="file" :form-data="formData"
				:showUploadProgress="true" :limit="3" @add="addImg"></robby-image-upload>
		</view>
		<view class="h60 pl10">备注</view>
		<view class="h300 p24 bsb bf border-r1 shadow">
			<textarea class="pw100 bf" v-model.trim="dataForm.faultContent" :show-count="false" :enableNative="false"
				:rows="4" auto-height cursor-spacing="40" style="min-height: 60upx;" placeholder="请输入设备故障问题"
				placeholder-class="c9"></textarea>
		</view>

		<view class="plr60 pt100 pb60">
			<u-button type="primary" shape="circle" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		HOST
	} from '@/config/index.js'
	import {
		Validator
	} from '@/utils/validate'
	import {
		faultReport
	} from '@/api/public.js'
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		name: 'fault',
		data() {
			return {
				imgUploadUrl: HOST + '/common/upload',
				header: {
					contentType: 'application/x-www-form-urlencoded',
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				formData: {
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				pics: [],
				dataForm: {
					deviceNo: '',
					faultContent: '',
					faultImg: []
				}
			}
		},
		methods: {
			scanCode() {
				const _self = this
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success(res) {
						console.log(res)
						if (res.errMsg == 'scanCode:ok') {
							let deviceNo = ''
							let deviceType = 0
							if (res.scanType == 'QR_CODE') {
								deviceNo = _self.getUrlParam('deviceNo', res.result)
								deviceType = _self.getUrlParam('deviceType', res.result)
							}
							if (deviceNo) {
								_self.dataForm.deviceNo = deviceNo
							} else {
								_self.toast('请扫描正确的二维码')
							}
						}
					}
				})
			},
			addImg(e) {
				console.log(e,'eeeeeee')
				this.dataForm.faultImg = [...this.dataForm.faultImg, ...e.imgArr.map(item => item.fileName)]
			},
			submit() {
				const validator = new Validator()
				validator.add(this.dataForm.faultContent, [{
					strategy: 'isNoEmpty',
					errorMsg: '内容不能为空！'
				}])
				let errorMsg = validator.start()
				if (errorMsg) {
					return this.toast(errorMsg)
				}
				if (this.dataForm.faultImg.length == 0) {
					return this.toast('请上传图片')
				}

				this.faultReport()
			},
			async faultReport() {

				const res = await faultReport(this.dataForm)

				this.confirm({
					content: '反馈成功',
					showCancel: false
				}).then(() => {
					uni.navigateBack({
						delta: 1,
						fail() {
							uni.redirectTo({
								url: '/pages/user/kefu/index'
							})
						}
					})
				})
			}
		},
		components: {
			robbyImageUpload
		}
	}
</script>

<style scoped lang="scss">
	.tit_active {
		background-color: $primary;
		color: #fff;
	}
</style>
